<template>
  <div class="images-com">
    <div v-show="showDelete" class="list-item-delete ">
      <span class="pull_left">{{ item.text }}</span>
      <span class="pull_right" @click.stop="deleteCurItem(item, index)"
        >删除</span
      >
    </div>
    <div v-if="item.stylesType == 0" class="styleOne">
      <div
        v-for="(imgItem, imgIndex) in item.imgUrls"
        :key="imgIndex"
        class="imgbox"
        style="height:100%;"
      >
        <img
          v-if="imgIndex == 0 && imgItem.src"
          :src="imgItem.src"
          alt=""
          style="height:100%;"
        />
        <img
          v-if="imgIndex == 0 && !imgItem.src"
          src="https://oss.ztwlxx.cn/default999.png"
        />
      </div>
    </div>
    <div v-if="item.stylesType == 1" class="styleTwo ">
      <div v-for="(imgItem, imgIndex) in oneArr" :key="imgIndex" class="imgbox">
        <img v-if="!imgItem.src && imgIndex == 0" :src="Images.tpPic2.one" />
        <img v-if="!imgItem.src && imgIndex == 1" :src="Images.tpPic2.two" />
        <img v-if="imgItem.src" :src="imgItem.src" />
      </div>
    </div>
    <div v-if="item.stylesType == 2" class="styleThree">
      <div v-for="(imgItem, imgIndex) in twoArr" :key="imgIndex" class="imgbox">
        <img v-if="!imgItem.src && imgIndex == 0" :src="Images.tpPic3.one" />
        <img v-if="!imgItem.src && imgIndex == 1" :src="Images.tpPic3.two" />
        <img v-if="!imgItem.src && imgIndex == 2" :src="Images.tpPic3.three" />
        <img v-if="imgItem.src" :src="imgItem.src" />
      </div>
    </div>
    <div v-if="item.stylesType == 3" class="styleFour">
      <div
        v-for="(imgItem, imgIndex) in threeArr"
        :key="imgIndex"
        class="imgbox"
      >
        <img v-if="!imgItem.src && imgIndex == 0" :src="Images.tpPic4.one" />
        <img v-if="!imgItem.src && imgIndex == 1" :src="Images.tpPic4.two" />
        <img v-if="!imgItem.src && imgIndex == 2" :src="Images.tpPic4.three" />
        <img v-if="!imgItem.src && imgIndex == 3" :src="Images.tpPic4.four" />
        <img v-if="imgItem.src" :src="imgItem.src" />
      </div>
    </div>
    <div v-if="item.stylesType == 4" class="styleFive ">
      <div v-for="(imgItem, imgIndex) in twoArr" :key="imgIndex" class="imgbox">
        <img v-if="!imgItem.src && imgIndex == 0" :src="Images.tpPic5.one" />
        <img v-if="!imgItem.src && imgIndex == 1" :src="Images.tpPic5.two" />
        <img v-if="!imgItem.src && imgIndex == 2" :src="Images.tpPic5.three" />
        <img v-if="imgItem.src" :src="imgItem.src" />
      </div>
    </div>
    <div v-if="item.stylesType == 5" class="styleSix">
      <div v-for="(imgItem, imgIndex) in twoArr" :key="imgIndex" class="imgbox">
        <img v-if="!imgItem.src && imgIndex == 0" :src="Images.tpPic6.two" />
        <img v-if="!imgItem.src && imgIndex == 1" :src="Images.tpPic6.one" />
        <img v-if="!imgItem.src && imgIndex == 2" :src="Images.tpPic6.three" />
        <img v-if="imgItem.src" :src="imgItem.src" />
      </div>
    </div>
  </div>
</template>

<script>
import { Images } from "../../data";

export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: -1
    },
    showDelete: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      Images
    };
  },
  computed: {
    oneArr() {
      let arr = this.item.imgUrls.filter((ele, i) => {
        if (i <= 1) return ele;
      });
      return arr;
    },
    twoArr() {
      let arr = this.item.imgUrls.filter((ele, i) => {
        if (i <= 2) return ele;
      });
      return arr;
    },
    threeArr() {
      let arr = this.item.imgUrls.filter((ele, i) => {
        if (i <= 3) return ele;
      });
      return arr;
    }
  },
  methods: {
    deleteCurItem(e, i) {
      this.$emit("deleteCurItem", e, i);
    }
  }
};
</script>

<style lang="scss" scoped>
.images-com {
  position: relative;
  .styleOne {
    .imgbox {
      height: 170px;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 170px;
    }
  }
  .styleTwo {
    padding: 6px;
    height: 106px;
    .imgbox {
      width: 50%;
      float: left;
      height: 94px;
      overflow: hidden;
    }
    img {
      width: 100%;
    }
    .imgbox:first-child {
      padding-right: 2px;
    }
    .imgbox:last-child {
      padding-left: 2px;
    }
  }
  .styleThree {
    padding: 6px;
    display: flex;
    div.imgbox {
      flex: 1;
      height: 117px;
      overflow: hidden;
      img {
        width: 100%;
        height: 115.33px;
      }
    }

    div:nth-child(2) {
      padding: 0 2px;
    }
  }
  .styleFour {
    padding: 6px;
    height: 358px;
    .imgbox {
      width: 50%;
      float: left;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 170px;
    }
    .imgbox:nth-child(1),
    .imgbox:nth-child(3) {
      padding-right: 4px;
    }
    // .imgbox:nth-child(2),
    // .imgbox:nth-child(4) {
    //   padding-left: 2px;
    // }
    // .imgbox:nth-child(1),
    // .imgbox:nth-child(2) {
    //   // padding-bottom: 2px;
    // }
    // .imgbox:nth-child(3),
    // .imgbox:nth-child(4) {
    //   padding-top: 2px;
    // }
  }
  .styleFive {
    padding: 6px;
    height: 208px;
    .imgbox {
      width: 50%;
      float: left;
      overflow: hidden;
    }
    img {
      width: 100%;
    }
    .imgbox:first-child {
      padding: 0 4px 4px 0;
    }
    .imgbox:nth-child(1) {
      img {
        height: 193px;
      }
    }
    .imgbox:nth-child(2),
    .imgbox:nth-child(3) {
      img {
        height: 94px;
      }
    }
  }
  .styleSix {
    padding: 6px;
    height: 206px;
    .imgbox {
      width: 50%;
      float: right;
      overflow: hidden;
    }
    img {
      width: 100%;
    }
    .imgbox:first-child {
      padding: 0 4px 0 4px;
    }
    .imgbox:nth-child(1) {
      img {
        height: 190px;
      }
    }
    .imgbox:nth-child(2),
    .imgbox:nth-child(3) {
      img {
        height: 93px;
      }
    }
  }
}
</style>
